<template>
  <div class="storeList-merchant views-container">

      <div class="wlm-table-content">
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <div class="wlm-form">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <!-- -->
                            <el-form  ref="formSub" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                               <!--  -->
                                <el-tabs v-model="activeName">
                                   <el-tab-pane label="基础信息" name="first">
                                     <div style="width:900px;">
                                           <el-form-item label="门店名称" prop="name">
                                        <el-input v-model.trim="formFormatData.formData.name">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="mobile">
                                        <el-input v-model.trim="formFormatData.formData.mobile">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="门店地址" class="city">
                                        <div class="flex-row flex-align-c">
                                            <city-select :config="initCityList" ref="cityselect" :changeEvt="formFormatFiltersChange"></city-select>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="详细地址" prop="detailed_address">
                                        <el-input v-model.trim="formFormatData.formData.detailed_address" :maxlength="50">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="营业日期">
                                        <el-checkbox-group v-model="formFormatData.formData.week">
                                            <el-checkbox v-for="day in days" :label="day.label" :key="day.label">{{day.title}}</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item label="营业时间">
                                        <div class="flex-row">
                                            <div class="flex-col flex-align-c flex-justify-c">
                                                <div v-for="(picker,index) in formFormatData.formData.time" :key="index" v-if="Array.isArray(formFormatData.formData.time[index])" style="margin-bottom:20px;width:100%;">
                                                 <div style="display:flex;">
                                                      <el-time-picker :clearable='false' v-model="formFormatData.formData.time[index][0]" value-format="timestamp" format='HH:mm' placeholder="选择开始时间">
                                                    </el-time-picker>
                                                    <el-time-picker :clearable='false' v-model="formFormatData.formData.time[index][1]" value-format="timestamp" format='HH:mm' placeholder="选择结束时间">
                                                    </el-time-picker>
                                                    <el-input v-model="formFormatData.formData.time[index][2]" placeholder="例：上午09:00-12:00 下午14:00-18:00" maxlength="2"></el-input>
                                                 </div>

                                                    <el-button v-if="index === 0" @click="addStorePicker(index)" style="margin-left:10px;align-self: flex-start;" type="text">添加营业时间段</el-button>
                                                    <el-button v-if="index !== 0" @click="delStorePicker(index)" style="margin-left:10px;" type="text">删除</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="营业状态">
                                        <el-switch :active-value="1" :inactive-value="0" v-model="formFormatData.formData.status"> </el-switch>
                                    </el-form-item>
                                    <el-form-item label="地图定位" :rules="[{required:true}]">
                                        <div class="flex-row flex-align-c input-inner">
                                            <baidu-map ref="map" :config="initMapList" :changeEvt="formFormatFiltersChange"></baidu-map>
                                        </div>
                                    </el-form-item>
                                     <el-form-item label="门店详情">
                                        <ueditor
                                            v-if="isFirst"
                                            :ueditorChange="shopInfoChange"
                                            :ueditorList="ueditorList"
                                            :bindIndex="1"
                                            :defaultMsg='defaultMsg1'
                                            :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                                            ref="by_know"></ueditor>
                                    </el-form-item>
                                     </div>
                                  </el-tab-pane>
                                  <el-tab-pane label="门店营销设置" name="second">
                                      <div style="width:900px;">
                                            <el-form-item label="所属商圈">
                                         <el-select v-model="formFormatData.formData.circle_id" filterable placeholder="请选择" >
                                            <el-option v-for="item in categoryData" :key="item.circle_id" :label="item.circle_name" :value="item.circle_id" :disabled="item.default==true"></el-option>
                                          </el-select>
                                           <el-button style="margin-left:10px;" v-if="formFormatData.formData.circle_id" icon="el-icon-delete" circle plain @click="delcircleid"></el-button>
                                    </el-form-item>
                                    <el-form-item label="绑定社群" >
                                         <el-select  v-model="computedCityId" filterable placeholder="请选择">
                                            <el-option v-for="item in communityData" :key="item.id" :label="item.title " :value="item.id"></el-option>
                                          </el-select>
                                    </el-form-item>
                                    <el-form-item label="门店评分" >
                                          <el-input-number v-model="formFormatData.formData.store_score" :controls="false" :min="1" :max="5"></el-input-number>
                                          <div class="form-help">可填内容：1、1.5、2、2.5、3、3.5、4、4.5、5</div>
                                    </el-form-item>
                                    <el-form-item label="门店均价" >

                                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox ">
                                            <el-input-number v-model="formFormatData.formData.per_capita" :precision="2"  :controls="false" ></el-input-number>
                                            <div class="wlm-input-append append-right">元</div>
                                          </div>

                                    </el-form-item>
                                    <el-form-item label="添加标签" >
                                          <el-input v-model="formFormatData.formData.store_label" maxlength="2" style="width:130px;"></el-input>
                                          <span class="form-help">标签建议2个字</span>
                                    </el-form-item>
                                    <el-form-item label="门店描述" >
                                          <el-input v-model="formFormatData.formData.store_introduce" style="width:270px;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="优惠信息" >
                                          <el-input v-model="formFormatData.formData.dis_info" style="width:270px;"></el-input>
                                    </el-form-item>
                                      </div>
                                  </el-tab-pane>
                                  <el-tab-pane label="设置/相册" name="third">
                                       <el-form-item label="门店视频封面" ref="merchantlog">
                                             <choose-files ref="chooseFiles" :config="chooseVideostyletConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                            <div class="form-help">视频封面建议尺寸640*320</div>
                                    </el-form-item>
                                    <el-form-item label="门店视频" ref="merchantlog">
                                              <choose-files ref="chooseFiles" :config="chooseVideoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                            <div class="form-help" >视频为横向视频，视频比例4:3</div>
                                    </el-form-item>

                                    <el-form-item label="门店相册" >
                                        <choose-files ref="chooseFiles" :config="chooseStoreConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                         <div class="form-help">视频封面建议尺寸630*466</div>
                                    </el-form-item>
                                     <el-form-item label="门店LOGO" >
                                        <choose-files ref="chooseFiles" :config="chooseMendianConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                         <div class="form-help">视频封面建议尺寸400*400</div>
                                    </el-form-item>
                                  </el-tab-pane>
                                </el-tabs>
                            </el-form>
                        </div>
                    </div>
                </div>
                </div>
            </el-scrollbar>
      </div>
      <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <!-- <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchant/business', code: 1 }})" type="primary">保存</el-button> -->
        <el-button size="small" @click="saveform" type="primary">保存</el-button>
        <router-link tag="span" to="/merchant/business">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>

  </div>
</template>
<script>
import BaiduMap from '@/components/BaiduMap/index'
import CitySelect from '@/components/CitySelect/index'
import ChooseUser from '@/components/ChooseUser/index' // Waves directive
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  shopEdit,
  shopGet,
  shopDelete,
  shopIndex,
  storeStatus,
  getCircle

} from '@/api/merchant'
import mixins from '@/mixins/mixins'
  import ueditor from '@/components/Ueditor/index'
import {
  communityList
} from '@/api/merchandise'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'UserPlatform',
  components: {
    BaiduMap,
    CitySelect,
    ChooseUser,
    ChooseFiles,
    ueditor
  },
  data() {
    const nowDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDay(), 0, 0).getTime()
    const nowDateEnd = new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDay(), 23, 59).getTime()
    return {
      isFirst:false,
      ueditorList: [],
      defaultMsg1: '',
      activeName: 'first',
      defaultActive: '1',
      nowDate,
      categoryData: [],
      communityData: [],
      nowDateEnd,
      defalutWeek: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
      dialogTableVisible: false,
      initChooseUser: {},
      checkedDays: [],
      initMapList: {
        initList: [
          //   { 'name': 'lng', 'value': 116.404288 },
          //   { 'name': 'lat', 'value': 39.918242 }
        ],
        bindKey: { key: [{ 'name': 'lng', type: 'String' }, { 'name': 'lat', type: 'String' }, { 'name': 'address', type: 'String' }], model: 'map' }
      },
      initCityList: {
        initList: [
          //   { id: '130000', value: '河北省' },
          //   { id: '130100', value: '石家庄市' },
          //   { id: '130102', value: '长安区' }
        ],
        bindKey: { key: [{ 'name': 'prce', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'area', type: 'String' }], model: 'address' }
      },
      days: [{
        title: '星期一',
        label: 'monday'
      }, {
        title: '星期二',
        label: 'tuesday'
      }, {
        title: '星期三',
        label: 'wednesday'
      }, {
        title: '星期四',
        label: 'thursday'
      }, {
        title: '星期五',
        label: 'friday'
      }, {
        title: '星期六',
        label: 'saturday'
      }, {
        title: '星期天',
        label: 'sunday'
      }],
      platformConfig: {
        type: ['image'],
        initList: []
      },
      chooseVideostyletConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      chooseVideoConfig: {
        type: ['video'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'video',
        bindKey: {
          key: 'video',
          model: 'video'
        }
      },
      chooseStoreConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 5,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'quaimg',
          model: 'img'
        }
      },
      chooseMendianConfig:{
         type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'store_logo',
          model: 'img'
        }
        
      },
      formFormatData: {
        key: ['formSub'],

        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: shopGet,
            params: {
              bus_id: this.$route.query.bus_id
            },
            filters: {
              address: {
                bindInit: ['initCityList']
              },
              map: {
                bindInit: ['initMapList']
              },
              img: {
                bindInit: ['chooseVideostyletConfig', 'chooseStoreConfig','chooseMendianConfig']
              },
              video: {
                bindInit: ['chooseVideoConfig']
              }
            }
          },
          change: {
            status: {
              key: 'status',
              api: storeStatus
            }
          },
          submitForm: shopEdit
        },
        formData: {
          content:'', //活动内容
          quaimg: [],
          image: [],
          video: [],
          store_logo:[],
          circle_id: '',
          name: '',
          mobile: '',
          address: '',
          lng: '',
          lat: '',
          detailed_address: '',
          bus_id: this.$route.query.bus_id,
          prce: {},
          city: {},
          area: {},
          week: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
          time: [[nowDate, nowDateEnd]],
          status: 1,
          store_score: '', // 评分
          per_capita: '', // 人均
          store_introduce: '', // 门店介绍
          coity_id: '', // 社群id
          store_label: '', // 标签
          dis_info: '' // 优惠信息

        },
        rules: {
          name: [{
            required: true,
            message: '请输入门店名称',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
          detailed_address: [{
            required: true,
            message: '请填写详细地址',
            trigger: 'blur'
          }]
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: shopIndex,
            delList: shopDelete
          },
          tableData: [],
          files: {
            name: '',
            ids: [],
            is_page: 1,
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  // watch:{
  //    'formFormatData.formData.coity_id':{
  //     handler(newData, oldData){
  //       console.log("55555555555",newData,oldData)
  //     },
  //      immediate: true,
  //       deep: false
  //   },
  // },
  computed: {
    computedCityId: {
      get() {
        return this.formFormatData.formData.coity_id == 0 ? '' : this.formFormatData.formData.coity_id
      },
      set(val) {
        this.formFormatData.formData.coity_id = val
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isFirst = true
      }, 500)
 
    })
  },
  created() {
    this.getcircles()
    this.community()
  },
  methods: {
    saveform(){
               this.formFormatData.formData.content = this.defaultMsg1
      this.formFormatSubmit()
      this.$router.push({ path: '/merchant/business' })
    },
     shopInfoChange(msg) {
            this.defaultMsg1 = msg
            },
    delcircleid(){
      this.formFormatData.formData.circle_id=''
    },
    delStorePicker(index) {
      this.formFormatData.formData.time.splice(index, 1)
    },
    addStorePicker() {
      this.formFormatData.formData.time.push([this.nowDate, this.nowDateEnd])
    },
    formFormatCallBack(data, type, response) {
      console.log(data, type, response)
      if (type === 'editForm') {
        const { time,content } = data
        if (!Array.isArray(time[0])) {
          this.formFormatData.formData.time = [[this.nowDate, this.nowDateEnd]]
        }
        this.defaultMsg1 = content
      }
    },
    getcircles() {
      getCircle().then(res => {
        const { data: { data: msgData = [] } } = res
        this.categoryData = msgData
      })
    },
    community() {
      communityList({ list_rows: 'all' }).then(res => {
        // console.log("res",res)
        const { data: { data: msgData = [] } } = res
        this.communityData = msgData
        // console.log(" this.communityData", this.communityData)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .form-help{
        color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
  }
  .el-tabs /deep/ .el-tabs__nav-wrap::after{
    background-color: white;
  }
  .input-inner{
    /deep/.el-input__inner{
      height: 32px;

    }
  }
</style>
